<!-- 首页 -->
<template>
  <div class="home">
    <div class="home-header">
      <div class="han1">
        <h3>审核管理</h3>
      </div>
      <div class="han2">
        <div class="gaunli">
          <!-- 点击跳转销售楼盘  -->
          <button class="guanliy" @click="xiaoshuo">全部</button>
          <!-- 点击跳转房屋出租 -->
          <button class="guanliyi" @click="fangwu">房屋出租</button>
          <button class="guanlier" @click="fangwu">房屋出租</button>
        </div>
      </div>
      <div class="han3">
        <div>
          <el-cascader
            v-model="value"
            :options="options1"
            @change="handleChange"
          ></el-cascader>
        </div>
        <div>
          <el-cascader
            v-model="value"
            :options="options2"
            @change="handleChange"
          ></el-cascader>
        </div>
        <div>
          <el-cascader
            v-model="value"
            :options="options3"
            @change="handleChange"
          ></el-cascader>
        </div>
        <div>
          <button>查看</button>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="han4"></div>
    </div>
    <!-- 内容 -->
    <div class="home-bboyd">
      <div class="han-hanbox1">
        <el-table :data="tableData" style="width: 100%" max-height="500">
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="查看" width="200">
          </el-table-column>
        </el-table>
      </div>
      <div class="han-hanbox2">
        <div></div>
        <div></div>
        <div>
          <el-pagination background layout="prev, pager, next" :total="100">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //这里存放数据
      //添加
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      //信息人物
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      //原信息
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      //搜索
      search: "",
      value: [],

      options1: [
        {
          value: "选项1",
          label: "上海",
        },
        {
          value: "选项2",
          label: "广西",
        },
        {
          value: "选项3",
          label: "北京",
        },
        {
          value: "选项4",
          label: "南京",
        },
        {
          value: "选项5",
          label: "天津",
        },
      ],
      options2: [
        {
          value: "选项1",
          label: "上海",
        },
        {
          value: "选项2",
          label: "广西",
        },
        {
          value: "选项3",
          label: "北京",
        },
        {
          value: "选项4",
          label: "南京",
        },
        {
          value: "选项5",
          label: "天津",
        },
      ],
      options3: [
        {
          value: "选项1",
          label: "黄埔区",
        },
        {
          value: "选项2",
          label: "奉贤区",
        },
        {
          value: "选项3",
          label: "宁闲区",
        },
        {
          value: "选项4",
          label: "徐汇区",
        },
        {
          value: "选项5",
          label: "宝山区",
        },
        {
          value: "选项6",
          label: "虹口区",
        },
      ],
      // value1: "",
      // value2: "",
      // value3: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //搜索
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //联动
    handleChange(value) {
      console.log(value);
    },
    xiaoshuo() {
      this.$router.push("/Guanliyi");
    },
    fangwu() {
      this.$router.push("/Guanlier");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.home-header {
  width: 100%;
  height: 200px;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
}
// .home-header div {
//   width: 100%;
//   height: 50px;
//   // border: 1px solid #000;
// }
/////1
.han1 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
/////2
.han2 {
  width: 100%;
  height: 50px;
  padding: 0px 40px;
}
.han2 div {
  width: 200px;
  height: 50px;
  // background: orange;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.han2 div button {
  width: 100px;
  height: 30px;
  outline: none;
  border: none;
  font-weight: bolder;
  color: #fff;
}
.han2 div button:hover {
  color: red;
}
///3333
.han3 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.han3 button {
  width: 100px;
  height: 30px;
  background: paleturquoise;
  color: #fff;
  outline: none;
  border: none;
  // font-size: 20px;
  font-weight: bolder;
}
.han3 button:hover {
  color: red;
}
.guanliyi {
  background: powderblue;
}
.guanliyquan {
  width: 100%;
  height: 50px;
  background: #ccc;
}
/// 44444
.han4 {
  width: 100%;
  height: 50px;
}
.han4 div {
  width: 200px;
  height: 50px;
  text-align: center;
  // line-height: 50px;
}
.han4 div button {
  width: 100px;
  height: 30px;
  outline: none;
  border: none;
  font-weight: bolder;
  color: #fff;
  background: rgb(48, 220, 243);
}
.han4 div button:hover {
  color: red;
}
.guanlier {
  background: pink;
}
//内容
.home-bboyd {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  border-top: 1px solid #000;
  background: rgba(7, 182, 95, 0.719);
  display: flex;
  flex-direction: column;
}
.han-hanbox1 {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  background: rgb(255, 255, 255);
}
.han-hanbox2 {
  width: 100%;
  height: 100px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  // align-items: center;
  padding: 0px 40px;
}
.shousuo {
  background: red;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  width: 150px;
  height: 50px;
}
</style>